<template>
  <div>
    <el-table :data="specsArr" style="width: 100%">
      <el-table-column prop="id" label="规格编号" width="180">
      </el-table-column>
      <el-table-column prop="specsname" label="规格名称" width="180">
      </el-table-column>
      <el-table-column prop="attrs" label="规格属性">
        <template slot-scope="obj">
          <el-button
            type="primary"
            plain
            v-for="item in obj.row.attrs"
            :key="item.id"
            >{{ item }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="obj">
          <el-button type="success" v-show="obj.row.status == 1" plain
            >启用中</el-button
          >
          <el-button type="warning" v-show="obj.row.status == 2" plain
            >已禁用</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="obj">
          <el-button type="primary" icon="el-icon-edit" circle @click="updata(obj.row.id)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="delSpecs(obj.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-size="size"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="pagelist"
      :hide-on-single-page=true
    >
    </el-pagination>
  </div>
</template>

<script>
import {specsdelete} from '../../request/api.js'
import { successMsg, failedMsg } from "../../tools/tools.js";
export default {
  props: ["specsArr", "total", "size"],
  methods:{
    pagelist(n){
      this.$emit('pagelist',n)
    },
    updata(n){
      this.$emit('updata',n)
    },
    delSpecs(id){
      specsdelete({id}).then(d=>{
        if(d.data.code == 200){
          successMsg(d.data.msg)
          this.$emit('delspecs')
        }else{
          failedMsg(d.data.msg)
        }
      })
    }
  }
};
</script>

<style>
.cell {
  text-align: center !important;
}
.el-pagination {
  margin-top: 30px;
  float: right;
}
</style>